<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<script src="resource/js/popup/viewDetailAccount.js"></script>
<script src="resource/js/popup/addFund.js"></script>
<script src="resource/js/popup/withdraw.js"></script>
<script src="resource/js/popup/transfer.js"></script>
<script src="resource/js/jquery/dnd.js"></script>


<div id="content">

	<!--  start page-heading -->
	<div id="page-heading">
		<h1 align="center" style="font-size: 30px; font-weight: bold">Search Account Customer</h1>
	</div>

	<div id="message-area">
		<span style="color: red">${error}</span>
	</div>
	<div id="top-search">
		<form action="searchIDCard.html" method="post">
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>

					<td><input type="text" value="" name="txtSearchAccount"
						onblur="if (this.value=='') { this.value='ID Card Number'; }"
						onfocus="if (this.value=='ID Card Number') { this.value=''; }"
						class="top-search-inp" placeholder="ID Card Number"/></td>

					<td><input type="submit" class="btn_search" id="approve"></input></td>

				</tr>
			</table>
		</form>
	</div>

	<table border="0" width="100%" cellpadding="0" cellspacing="0"
		id="content-table">
		<tr>
			<th rowspan="3" class="sized"><img
				src="resource/images/shared/side_shadowleft.jpg" width="20"
				height="300" alt="" /></th>
			<th class="topleft"></th>
			<td id="tbl-border-top">&nbsp;</td>
			<th class="topright"></th>
			<th rowspan="3" class="sized"><img
				src="resource/images/shared/side_shadowright.jpg" width="20"
				height="300" alt="" /></th>
		</tr>


		<tr>
			<td id="tbl-border-left"></td>
			<td>
				<!-- start content-table-inner ...................................................................... START -->
				<div id="content-table-inner">

<!-- -------------------------start table-content------------------------------  -->
<div id="table-content">
	<form id="main-form" action="">
		<table border="0" width="100%" cellpadding="0" cellspacing="0"
			id="product-table" class="paging">
			<thead>
				<tr>
					<th class="table-header-repeat line-left "><a >ID CARD</a></th>
					<th class="table-header-repeat line-left "><a >CUSTOMER</a></th>
					<th class="table-header-repeat line-left "><a >TYPE</a></th>
					<th class="table-header-repeat line-left "><a >ACCOUNT</a></th>
					<th class="table-header-repeat line-left "><a >STATE</a></th>
					<th class="table-header-repeat line-left "><a >BALANCE</a></th>
					<c:choose>
						<c:when test="${usertype == 'Admin User' }">
						</c:when>
						<c:otherwise>
							<th class="table-header-options line-left"><a >ADD FUND</a></th>
							<th class="table-header-options line-left"><a >WITHDRAW</a></th>
							<th class="table-header-options line-left"><a >TRANSFER</a></th>
						</c:otherwise>
					</c:choose>
				</tr>
			</thead>
			<tbody>
				<c:choose>
					<c:when test="${accounts.size() > 0}">
						<c:forEach items="${accounts}" var="acc">
							<tr>
								<td align="center">${acc.idCardNumber.idCardNumber}</td>
								<td align="center">${acc.idCardNumber.lastName}
									${acc.idCardNumber.midName} ${acc.idCardNumber.firstName}</td>
								<td align="center">${acc.accountType}</td>
								<td align="center"><a href=""
									class="link_viewDetailAccount"
									data-viewDetailAccountNumber=${acc.accountNumber }>${acc.accountNumber}</a></td>
								<td align="center">${acc.accountState}</td>
								<td align="center"
									style="color: DarkGreen; font-weight: bold;">${acc.balance}</td>
								<c:choose>
									<c:when test="${usertype == 'Admin User'}">
									</c:when>
									<c:otherwise>
										<c:choose>
											<c:when test="${acc.accountState =='active' }">
												<td align="center"><input data-addFundAccountNumber=${acc.accountNumber }
													type="button" class="btn_addFundRequest"
													value="" />
												</td>
												<td align="center"><input data-withdrawAccountNumber=${acc.accountNumber }
													type="button" class="btn_withdrawRequest"
													value="" /> 
												</td>
												<td align="center"><input data-transferAccountNumber=${acc.accountNumber }
													type="button" class="btn_transferRequest"
													value="" />
												</td>
											</c:when>
											<c:otherwise>
												<td align="center"><input class="no_permission"></td>
												<td align="center"><input class="no_permission"></td>
												<td align="center"><input class="no_permission"></td>
											</c:otherwise>	
										</c:choose>
									</c:otherwise>
								</c:choose>
							</tr>
						</c:forEach>
					</c:when>
				</c:choose>
			</tbody>
		</table>
	</form>
</div>
<!-- 	------------------------------------------------end content-table--------------------------------------  -->
				</div>
			</td>
			<td id="tbl-border-right"></td>
		</tr>
		<tr>
			<th class="sized bottomleft"></th>
			<td id="tbl-border-bottom">&nbsp;</td>
			<th class="sized bottomright"></th>
		</tr>
	</table>
	<div class="clear">&nbsp;</div>
	
	
<!-- --------------------------------------------------------------------------------------------- -->
<!-- ----------------------------VIEW DETAIL ACCOUNT---------------------------------------------- -->
<div id="popup_viewDetailAccount" class="popup_container">
	<form>
		<div class="popup_title_bar">VIEW DETAIL ACCOUNT</div>
		<div class="popup_image_viewDetailAccount"></div>
		<div class="popup_content">
			<table id="table_viewDetailAccount">
				<tr>
					<td class="format-left">ID Card Number:</td>
					<td class="idCardNumber"></td>
				</tr>
				<tr>
					<td class="format-left">Full Name:</td>
					<td class="fullName"></td>
				</tr>
				<tr>
					<td class="format-left">Account Type:</td>
					<td class="accountType"></td>
				</tr>
				<tr>
					<td class="format-left">Account Number:</td>
					<td class="accountNumber"></td>
				</tr>
				<tr>
					<td class="format-left">State:</td>
					<td class="accountState"></td>
				</tr>
				<tr>
					<td class="format-left">Balance:</td>
					<td class="balance"></td>
				</tr>
				<tr>
					<td class="format-left">Mobile Home:</td>
					<td class="mobilePhone"></td>
				</tr>
				<tr>
					<td class="format-left">Home Phone:</td>
					<td class="phoneHome"></td>
				</tr>
				<tr>
					<td class="format-left">Email:</td>
					<td class="email"></td>
				</tr>
				<tr>
					<td class="format-left">Address 1:</td>
					<td class="address1"></td>
				</tr>
				<tr>
					<td class="format-left">Address 2:</td>
					<td class="address2"></td>
				</tr>
			</table>
		</div>
		<div class="popup_bottom_bar">
			<input id="popup_close" class="popup_button_center"  type="button" value="close">
		</div>
	</form>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- -------------------------------------END----------------------------------------------------- -->

<!-- --------------------------------------------------------------------------------------------- -->
<!-- -------------------------------ADD FUND REQUEST---------------------------------------------- -->
<div id="popup_addFundRequest" class="popup_container">
	<form id="form_addFundRequest">
		<div class="popup_title_bar">ADD FUND</div>
		<div class="popup_image_addFund"></div>
		<div class="popup_content">		
			<table id="table_addFundRequest">
				<tr>
					<td class="format-left">ID Card Number:</td>
					<td class="idCardNumber"></td>
				</tr>
				<tr>
					<td class="format-left">Full Name:</td>
					<td class="fullName"></td>
				</tr>
				<tr>
					<td class="format-left">Account Type:</td>
					<td class="accountType"></td>
				</tr>
				<tr>
					<td class="format-left">Account Number:</td>
					<td class="accountNumber"></td>
				</tr>
				<tr>
					<td class="format-left">State:</td>
					<td class="accountState"></td>
				</tr>
				<tr>
					<td class="format-left">Balance:</td>
					<td class="balance"></td>
				</tr>
				<tr>
					<td class="format-left">Money Add:</td>
					<td><input type="number" min="1" max="2000000000" class="money_transaction"
						required="required" name="moneyAdd" placeholder="($) AMOUNT"/></td>
				</tr>
			</table>
		</div>
		<div class="popup_bottom_bar">
			<input class="popup_button_right" type="button" value="cancel" id="btn_addFundRequest_cancel" />
			<input class="popup_button_center" type="reset" value="reset"/> 
			<input class="popup_button_left" type="submit" value="confirm" id="btn_addFundConfirm" /> 
		</div>
	</form>
</div>

<!-- -------------------------------ADD FUND CONFIRM---------------------------------------------- -->
<div id="popup_addFundConfirm" class="popup_container">
	<form>
		<div class="popup_title_bar">ADD FUND</div>
		<div class="popup_image_transaction_confirm"></div>
		<div class="popup_content">	
			<table id="table_addFundConfirm">
				<tr>
					<td class="format-left">ID Card Number:</td>
					<td class="idCardNumber"></td>
				</tr>
				<tr>
					<td class="format-left">Full Name:</td>
					<td class="fullName"></td>
				</tr>
				<tr>
					<td class="format-left">Account Type:</td>
					<td class="accountType"></td>
				</tr>
				<tr>
					<td class="format-left">Account Number:</td>
					<td class="accountNumber"></td>
				</tr>
				<tr>
					<td class="format-left">State:</td>
					<td class="accountState"></td>
				</tr>
				<tr>
					<td class="format-left">Balance Before:</td>
					<td class="balance"></td>
				</tr>
				<tr>
					<td class="format-left">Money Add:</td>
					<td class="moneyAdd" /></td>
				</tr>
				<tr>
					<td class="format-left">Balance After:</td>
					<td class="moneyRemain"></td>
				</tr>
			</table>
		</div>
		<div class="popup_transaction_response">
			<input type="hidden" name="transactionId" id="idTransactionReject">
			<p class="message"></p>
			<p class="error"></p>
			<p class="validation"></p>
		</div>
		<div class="popup_bottom_bar">
			<input class="popup_button_left" type="button" value="complete" id="btn_addFundComplete"/> 
			<input class="popup_button_right" type="button" value="cancel" class="form-cancel" id="btn_addFundConfirm_cancel" />
		</div>
	</form>
</div>

<!-- -------------------------------ADD FUND COMPLETE---------------------------------------------- -->
<div id="popup_addFundComplete" class="popup_container">
	<form>
		<div class="popup_title_bar">ADD FUND</div>
		<div class="popup_image_transaction_success"></div>
		<div class="popup_content">	
			<p class="message"></p>
			<p class="error"></p>
			<p class="validation"></p>
		</div>
		<div class="popup_bottom_bar">
			<input class="popup_button_center" type="button" value="close" id="btn_addFundConfirm_close" />
		</div>
	</form>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- -------------------------------------END. ADD FUND----------------------------------------------------- -->




<!-- ------------------------------------------NHUT--------------------------------------------------- -->
<!-- -------------------------------WITHDRAW REQUEST---------------------------------------------- -->
<div id="popup_withdrawRequest" class="popup_container">
	<form id="form_withdrawRequest">
		<div class="popup_title_bar">WITHDRAW</div>
		<div class="popup_image_withdraw"></div>
		<div class="popup_content">	
			<table id="table_withdrawRequest">
				<tr>
					<td class="format-left">ID Card Number:</td>
					<td class="idCardNumber"></td>
				</tr>
				<tr>
					<td class="format-left">Full Name:</td>
					<td class="fullName"></td>
				</tr>
				<tr>
					<td class="format-left">Account Type:</td>
					<td class="accountType"></td>
				</tr>
				<tr>
					<td class="format-left">Account Number:</td>
					<td class="accountNumber"></td>
				</tr>
				<tr>
					<td class="format-left">State:</td>
					<td class="accountState"></td>
				</tr>
				<tr>
					<td class="format-left">Balance:</td>
					<td class="balance"></td>
				</tr>
				<tr>
					<td class="format-left">Money Withdraw:</td>
					<td><input type="number" min="1" class="money_transaction" placeholder="($) AMOUNT"
						required="required" name="moneyWithdraw" /></td>
			
				</tr>
				
			</table>
			<label style="font-weight: bold; color: red;" class="validBalanceWithdraw"> </label>
		</div>
		<div class="popup_bottom_bar">
			<input class="popup_button_left" type="submit" value="confirm" id="btn_withdrawConfirm" />
			<input class="popup_button_center" type="reset" value="reset"/>
			<input class="popup_button_right" type="button" value="cancel" id="btn_withdrawRequest_cancel" />
		</div>
	</form>
</div>
<!-- ----------------------------------------------------------------- -->
<!-- -------------------------------------END----------------------------------------------------- -->

	<!-- --------------------------------------------------------------------------------------------- -->
	<!-- -------------------------------WITHDRAW CONFIRM---------------------------------------------- -->
	<div id="popup_withdrawConfirm" class="popup_container">
	<form>
	
		<div class="popup_title_bar">WITHDRAW</div>
		<div class="popup_image_transaction_confirm"></div>
		<div class="popup_content">	
			<table id="table_withdrawConfirm">
				<tr>
					<td class="format-left">ID Card Number:</td>
					<td class="idCardNumber"></td>
				</tr>
				<tr>
					<td class="format-left">Full Name:</td>
					<td class="fullName"></td>
				</tr>
				<tr>
					<td class="format-left">Account Type:</td>
					<td class="accountType"></td>
				</tr>
				<tr>
					<td class="format-left">Account Number:</td>
					<td class="accountNumber"></td>
				</tr>
				<tr>
					<td class="format-left">State:</td>
					<td class="accountState"></td>
				</tr>
				<tr>
					<td class="format-left">Balance Before:</td>
					<td class="balance"></td>
				</tr>
				<tr>
					<td class="format-left">Money Withdraw:</td>
					<td class="moneyWithdraw" /></td>
				</tr>
				<tr>
					<td class="format-left">Balance After:</td>
					<td class="moneyRemainWithraw"></td>
				</tr>
			
				
					
				
			</table>
			</div>
			<div class="popup_bottom_bar">
					<input class="popup_button_left" type="button" value="complete" id="btn_withdrawComplete"/> 
					<input class="popup_button_right" type="button" value="cancel" class="form-cancel" id="btn_withdrawConfirm_cancel" /></td>
					</div>
		</form>
	</div>
	<!-- --------------------------------------------------------------------------------------------- -->
	<!-- -------------------------------------END----------------------------------------------------- -->
<!-- ------------------------------WITHDRAW COMPLETE---------------------------------------------- -->
<div id="popup_withdrawComplete" class="popup_container">
	<form>
		<div class="popup_title_bar">WITHDRAW</div>
		<div class="popup_image_transaction_success"></div>
		<div class="popup_content">	
			<p class="message"></p>
			<p class="error"></p>
			<p class="validation"></p>
		</div>
		<div class="popup_bottom_bar">
			<input class="popup_button_center" type="button" value="close" id="btn_withdrawConfirm_close" />
		</div>
	</form>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<!-- -------------------------------------END. WITHDRAW FUND----------------------------------------------------- -->


	<!-- -------------------------------TRANSFER REQUEST---------------------------------------------- -->
	<div id="popup_transferRequest" class="popup_container">
		<form id="form_transferRequest">
		<div class="popup_title_bar">TRANSFER</div>
		<div class="popup_image_transfer"></div>
		<div class="popup_content">
			<table id="table_transferRequest">
				<tr>
					<!--  end step-holder -->
					<td style="width: 50%">
						<h1 style="margin-bottom: 10px;">
							<font color="blue">Transfer Money Information</font>
						</h1>
						<br>
						<table id="id-form">
							<tbody>
								<tr>
									<th valign="top" style="">Account Number:</th>
									<td class="accountNumber"></td>
								</tr>
								<tr>
									<th valign="top">ID Card Number:</th>
									<td class="idCardNumber"></td>
								</tr>
								<tr>
									<th valign="top">Customer Name:</th>
									<td class="fullName"></td>
								</tr>

								<tr>
									<th valign="top">Current Balance:</th>
									<td class="balance"></td>
								</tr>
								<tr>
									<th valign="top">Money Transfer:</th>
									<td>
									<input type="number" min="1" class="money_transaction" placeholder="($) AMOUNT"
						required="required" name="moneyTransfer" />
									</td>
								</tr>
								<tr>
								<!-- <td style="color: red" class="validMoneyTransfer"></td> -->
								</tr>
								<tr>
									<th valign="top" style="">Receiver Account:</th>
									<td><input width="25" name="receiverAccountNumber" type="text"
										class="receiverAccount" placeholder="Account Number" required/></td>
								</tr>
								<tr>
								<!-- <td style="color: red" class="validReceiverAccountNumber"></td> -->
								</tr>
							</tbody>
						</table>
					</td>
				</tr>
			</table>
			<div>
			</div>
			<label class="error"></label>
			</div>
		<div class="popup_bottom_bar">
			<input class="popup_button_left" type="submit" value="confirm" id="btn_transferConfirm" />
			<input class="popup_button_center" type="reset" value="reset" id="btn_transferReset"/>
			<input class="popup_button_right" type="button" value="cancel" id="btn_transferRequest_cancel" />
		</div>
		</form>
	</div>
	<!-- --------------------------------------------------------------------------------------------- -->
	<!-- -------------------------------------END----------------------------------------------------- -->

	<!-- --------------------------------------------------------------------------------------------- -->
	<!-- -------------------------------TRANSFER CONFIRM---------------------------------------------- -->
	<div id="popup_transferConfirm" class="popup_container_transfer">
		<form action="transferComplete" method="post">
		<div class="popup_title_bar">TRANSFER</div>
		<div class="popup_image_transaction_confirm"></div>
		<div class="popup_content">	
			<input type="hidden" class="getMoneyTransfer" name="moneyTransfer">
			<table>
				<tr valign="top">
					<td style="width: 400px">
						<h1 style="margin-bottom: 10px;">
							<font color="blue">Sender Info</font>
						</h1> <!-- start id-form -->
						<table id="id-form">
							<tr>
								<th valign="top" style="">Account Number:</th>
								<td class="accountNumber"></td>
							</tr>

							<tr>
								<th valign="top">ID Card Number:</th>
								<td class="idCardNumber"></td>
							</tr>

							<tr>
								<th valign="top">Customer Name:</th>
								<td class="fullName"></td>
							</tr>

							<tr>
								<td class="format-left">Balance Before:</td>
								<td class="balance"></td>
							</tr>
							<tr>
								<td class="format-left">Money Transfer:</td>
								<td class="moneyTransfer" /></td>
							</tr>
							<tr>
								<td class="format-left">Balance After::</td>
								<td class="moneyRemain"></td>
							</tr>
						</table> <!-- end id-form  -->

					</td>
				</tr>
				<tr>
				<td></td>
				</tr>
				<tr>
					<td>

						<h1 style="margin-bottom: 10px;">
							<font color="blue">Receiver Info</font>
						</h1>
						<table id="id-form">
							<tr>
								<th valign="top" style="">Account Number:</th>
								<td class="receiverNumber"></td>
								<td></td>
							</tr>

							<tr>
								<th valign="top">ID Card Number:</th>
								<td class="receiverIDCard"></td>
								<td></td>
							</tr>

							<tr>
								<th valign="top">Customer Name:</th>
								<td class="receiverName"></td>
								<td></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
			</div>
			<div class="popup_bottom_bar">
				<input class="popup_button_left" type="button" value="complete"
					id="btn_transferComplete" /> <input class="popup_button_right"
					type="button" value="cancel" class="form-cancel"
					id="btn_transferConfirm_cancel" />
				</td>
			</div>
		</form>
	</div>
	<!-- --------------------------------------------------------------------------------------------- -->
	
	<!-- ------------------------------WITHDRAW COMPLETE---------------------------------------------- -->
<div id="popup_transferComplete" class="popup_container">
	<form>
		<div class="popup_title_bar">TRANSFER</div>
		<div class="popup_image_transaction_success"></div>
		<div class="popup_content">	
			<p class="message"></p>
			<p class="error"></p>
			<p class="validation"></p>
		</div>
		<div class="popup_bottom_bar">
			<input class="popup_button_center" type="button" value="Close" id="btn_transferComplete_cancel" />
		</div>
	</form>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
	<!-- -------------------------------------END----------------------------------------------------- -->

</div>

